import React, { PureComponent } from 'react'
import './index.css'


export default class Parent extends PureComponent {
  state = { car: '奔驰' }

  changeCar = () => {
    this.setState({ car: '宝马' })
  }

 /*  shouldComponentUpdate(nextProps,nextState){
    console.log(this.props,this.state); // 目前的props，state
    console.log(nextProps,nextState); // 将要变化的目标props，目标state
    return !(this.state.car === nextState.car)
  } */
  render() {
    console.log('Parent组件渲染了');
    const { car } = this.state
    return (
      <div className='parent'>
        <h1>我是Parent组件</h1>
        <h5>我的车的名字是：{car}</h5>
        <br />
        <button onClick={this.changeCar}>换车</button>
        <Child car={car}/>
      </div>
    )
  }
}

class Child extends PureComponent {
/*   shouldComponentUpdate(nextProps,nextState){
    console.log(this.props,this.state); // 目前的props，state
    console.log(nextProps,nextState); // 将要变化的目标props，目标state
    return !(this.props.car === nextProps.car)
  } */
  render() {
    console.log('Child组件渲染了');
    const { car } = this.props
    return (
      <div className='child'>
        <h1>我是Child组件</h1>
        <h5>我接收到的车是：{car}</h5>
      </div>
    )
  }
}
